<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <template v-for="tableData in tableDatas">
    <h2>{{tableData.name}}</h2>

    <shopee-table stripe :data="tableData.data" >

      <shopee-table-column    fixed="left" label=""  :width="50">
        <template slot-scope="props">
          {{props.rowIndex+1}}
        </template>
      </shopee-table-column>

      <shopee-table-column label="步骤名称"  fixed="left" :width="180">
        <template slot-scope="props">
          {{props.row.name}}  <el-button v-if="props.row.type===0" :circle=true size="small"  @click="showHelp(props.row.name,props.row.auto_func)">?</el-button>
        </template>

      </shopee-table-column>
      <shopee-table-column prop="starttime_desc" label="开始时间" :width="180">
      </shopee-table-column>


    <shopee-table-column  label="执行状态" :width="80">
         <template slot-scope="props">
          <div v-if="props.row.status === 'success' || props.row.status === 'skip'" class="status unread">
            <shopee-tag status="success">{{props.row.status}}</shopee-tag>
          </div>
          <div v-if="props.row.status === 'fail' || props.row.status === 'exception'">
            <shopee-tag status="error">{{props.row.status}}</shopee-tag>
          </div>
          <div v-if="props.row.status === 'running'|| props.row.status === 'wait_running' || props.row.status === 'wait_todo'">
            <shopee-tag status="return">{{props.row.status}}</shopee-tag>
          </div>
          <div v-if="props.row.status === 'waiting' || props.row.status === 'wait_depend' || props.row.status === 'end'">
            <shopee-tag status="invalid">{{props.row.status}}</shopee-tag>
          </div>
        </template>
      </shopee-table-column>

       <shopee-table-column  label="检查人" :width="250">
        <template slot-scope="props">
          <p v-for="item in props.row.checkers">
            {{item}}
          </p>
        </template>
      </shopee-table-column>

      <shopee-table-column prop="strong_depend" label="强依赖" :width="60">
      </shopee-table-column>

       <shopee-table-column  label="执行完成通知" :width="250">
        <template slot-scope="props">
          <p v-for="item in props.row.success_alerter">
            {{item}}
          </p>
        </template>
      </shopee-table-column>

      <!-- <shopee-table-column prop="run_times" label="执行次数" :width="100">
      </shopee-table-column> -->


       <shopee-table-column prop="action" label="操作" fixed="right" :width="350" >
        <template slot-scope="props">
          <div v-if="props.row.type === 0" >
            <el-button  size="small" type="primary" @click="execute(props.row.id,props.row.name)">执行</el-button>
            <el-button  size="small" @click="skip(props.row.id)"  v-if="props.row.status !== 'success'">跳过</el-button>
            <el-button  size="small" @click="toUpdate(props.row)">修改</el-button>
            <el-button  size="small" @click="goStepExecuteRecordList(props.row.id)">执行历史</el-button>
            <el-button  size="small" @click="showResult(props.row.id,props.row.name)">查看结果</el-button>
          </div>

          <div v-if="props.row.type === 1">
            <el-button  v-if="props.row.status==='waiting' || props.row.status==='wait_depend'|| props.row.status==='end'  " size="small" type="primary" @click="addTodo(props.row.id)">创建待办</el-button>
            <el-button  v-if="props.row.status==='waiting' || props.row.status==='wait_depend'|| props.row.status==='end'  " size="small" @click="skip(props.row.id)"  >跳过</el-button>
            <el-button  v-if="props.row.status==='wait_todo'" size="small" type="primary" @click="allFinish(props.row.id)">全部完成</el-button>
            <el-button  v-if="props.row.status==='wait_todo'" size="small"  @click="allSkip(props.row.id)">全部跳过</el-button>
            <el-button  v-if="props.row.status==='wait_todo'" size="small"  @click="urge(props.row.id)">催办</el-button>
             <el-button  v-if="props.row.status==='waiting' || props.row.status==='wait_depend' || props.row.status==='end' " size="small" @click="toUpdate(props.row)">修改</el-button>
             <el-button  size="small" @click="goStepExecuteRecordList(props.row.id)">执行历史</el-button>
          </div>
        </template>
      </shopee-table-column>
    </shopee-table>

      </template>

    <el-dialog :title="helpTitle" :visible.sync="helpDialogVisible" width="55%" v-if="helpDialogVisible">
        <div id="markedHelp" v-html="helpContent"></div>
    </el-dialog>


    <el-dialog :title="executeForm.name+'-执行'" :visible.sync="executeDialog" width="50%" v-if="executeDialog">
       <el-row>
         <el-col  :span="4">
            检查依赖
         </el-col>
           <el-col :span="4">
            <el-checkbox v-model="executeForm.check_depend"></el-checkbox>
         </el-col>
       </el-row>
      <el-row>
         <el-col :span="4">
            执行完通知
         </el-col>
           <el-col :span="4">
            <el-checkbox v-model="executeForm.alert"></el-checkbox>
         </el-col>
       </el-row>
       <el-row v-loading="loading">
         <el-col  :span="4">
            <el-button type="primary" @click="executeStep">执行</el-button>
         </el-col>
          <el-col :span="4">
            <el-button  @click="cancel">取消</el-button>
         </el-col>
       </el-row>
     </el-dialog>

     <el-dialog title="步骤修改" :visible.sync="updateDialog" width="50%" v-if="updateDialog">
       <el-descriptions class="margin-top"  :column="1" size="1" border>
          <el-descriptions-item>
            <template slot="label">
              步骤名称
            </template>
             {{updateForm.name}}
          </el-descriptions-item>>

          <el-descriptions-item v-if="updateForm.type===0">
            <template slot="label" >
              执行方法
            </template>
             {{updateForm.auto_func}}
          </el-descriptions-item>>

        <el-descriptions-item>
            <template slot="label" >
              执行时间
            </template>
             <el-date-picker
              v-model="updateForm.starttime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-descriptions-item>>

          <el-descriptions-item v-if="updateForm.type===1">
            <template slot="label" >
              待办人
            </template>
             <el-input type="textarea" v-model="updateForm.checkers" style="width: 300px;" ></el-input>
          </el-descriptions-item>>

         <el-descriptions-item>
            <template slot="label" >
              是否强依赖
            </template>
             <el-input v-model="updateForm.strong_depend" style="width: 300px"></el-input>
          </el-descriptions-item>>

          <el-descriptions-item>
            <template slot="label" >
               执行完成通知人
            </template>
             <el-input type="textarea" v-model="updateForm.success_alerter" style="width: 300px"></el-input>
          </el-descriptions-item>>

         <el-descriptions-item>
           <el-button type="primary" @click="update">修改</el-button>
          </el-descriptions-item>

       </el-descriptions>
     </el-dialog>

      <el-dialog :title="resultTitle"  :visible.sync="resultDialogVisible" width="55%" v-if="resultDialogVisible">
      <div id="markedResult" v-html="resultContent"></div>
    </el-dialog>

  </div>
  </el-card>
  </template>

  <script>
    import {api, getRequest, postRequest} from "@/api/commit";
    import {marked2Html} from "@/api/schedulex/index";


    export default {
      name : "TaskInstanceDetailsActionTable",
      data() {
        return {
          tableDatas:[
            {
              "name": "",
              "data": []
            }
          ],
          taskInstanceActionTable: [],
          updateDialog:false,
          executeDialog:false,
          helpDialogVisible:false,
          helpTitle:"",
          helpContent:"",
          updateForm:{
            id:0,
            checkers:"",
            name:"",
            auto_func:"",
            starttime:"",
            strong_depend:"",
            success_alerter:"",
            type:"",
            stage:""
          },
          loading:false,
          executeForm:{
            name:'',
            id:'',
            check_depend:false,
            alert:false
          },
          resultContent:"",
          resultDialogVisible:false,
          resultTitle:""
        }
      },
      methods: {
        showResult(id,name){
              getRequest(api['step_get_result'],{id:id}).then((res) => {
                this.resultTitle=name+"-"+res.resultReturn.status+"-[ "+res.resultReturn.executetime+" ]"
                this.resultContent=marked2Html(res.resultReturn.data)
                this.resultDialogVisible=true
              }, (error) => {
                this.$message('获取结果失败');
              })
        },
        showHelp(name,funcName){
          try{
              getRequest(api['step_get_marked_content'],{key:funcName}).then((res) => {
                this.helpTitle=name+"-说明"
                this.helpContent=marked2Html(res.resultReturn.data)
                this.helpDialogVisible=true
              }, (error) => {
                this.$message('暂无帮助信息');
              })
          }catch (e) {
            this.$message('暂无帮助信息');
          }
        },
        init_data() {
          let params ={
            "id": this.$route.query.id
          }
          getRequest(api['task_instance_step_list'],params).then((res) => {
            res = res.resultReturn
            // this.taskInstanceActionTable= res.data
            this.tableDatas=res.data
          }, (error) => {
            console.info(error)
          })
        },
        execute(id,name) {
          this.executeForm.name=name;
          this.executeForm.id=id;
          this.executeDialog=true;
        },
        cancel(){
          this.executeDialog=false;
        },
        addTodo(id) {
          let params = {
            "id":id,
            "alert":false,
            "check_depend":false
          }
          this.loading=true;
          postRequest(api['step_execute'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
            this.loading=false;
          }, (error) => {
            this.loading=false;
            console.info(error)
          })
        },
        executeStep() {
          let params = {
            "id":this.executeForm.id,
            "alert":this.executeForm.alert,
            "check_depend":this.executeForm.check_depend
          }
          this.loading=true;
          postRequest(api['step_execute'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
            this.loading=false;
            this.executeDialog=false
            this.showResult(this.executeForm.id,this.executeForm.name)
          }, (error) => {
            this.loading=false;
            console.info(error)
          })
        },
        skip(id) {
          let params = {
            "id":id
          }
          postRequest(api['step_skip'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        toUpdate(data){
          this.updateForm.id=data.id
          this.updateForm.name=data.name
          this.updateForm.checkers=data.checkers.join("\n")
          this.updateForm.starttime=data.starttime
          this.updateForm.auto_func=data.auto_func
          this.updateForm.strong_depend=data.strong_depend
          this.updateForm.success_alerter=data.success_alerter.join("\n")
          this.updateForm.type=data.type
          this.updateForm.stage=data.stage
          this.updateDialog=true
        },
        update() {
          postRequest(api['step_update'],this.updateForm).then((res) => {
            res = res.resultReturn
            this.updateDialog=false
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        allFinish(id) {
          let params = {
            "id":id
          }
          postRequest(api['step_all_done'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        allSkip(id) {
          let params = {
            "id":id
          }
          postRequest(api['step_all_skip'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        urge(id) {
          let params = {
            "id":id
          }
          postRequest(api['step_remind'],params).then((res) => {
            res = res.resultReturn
          }, (error) => {
            console.info(error)
          })
        },

        goStepExecuteRecordList: function(id){
          // this.loading=true;
          this.$router.push({
            path: '/TaskInstanceExecuteListView',
            query:{
              id:id
            }
          })
        },
      },
      mounted () {
        this.init_data()
      }
    }
  </script>

